<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 50px;
            background-color: aqua;
            color: black;
            text-align: center;
            font: 800 20px/50px "";
            margin: 50px auto;
        }
    </style>
</head>

<body>
    <div>1</div>
</body>

</html>

<script>
    // 获取用户输入的一个初始元素  ： 隔开的数字
    // 将这个数字转换为秒数，利用定时器进行每秒自减。再转换为分秒格式输出到页面上即可
    // 在秒数倒计时到0 的时候，清除定时器。


    var originTime = prompt('请输入一个初始时间')
    var dv = document.querySelector('div')
    var transTime = originTime.split(':')
    dv.innerHTML = transTime[0].padStart(2,'0') + ':' + transTime[1].padStart(2,'0')
    
    var secTime = transTime[0] * 60 + transTime[1] / 1

    var timeInterval = setInterval(function () {
        secTime--
        var transMin = parseInt(secTime / 60) + ''
        var tranSec = secTime % 60 + ''
        dv.innerHTML = transMin.padStart(2,'0') + ':' + tranSec.padStart(2,'0')
        if (secTime==0) {
            clearInterval(timeInterval)
        }
    }, 1000)



</script>


<!-- 拓展：
1. split的用法 字符串方法,可以将一个字符串按照分割符,分割成一个数组
如果字符串不具备传入的分隔符,那么就会切割成一个整体,数组length是1
如果传的是空字符,那么会将没一个字符串进行分割,并且返回一个数组
2. padStart用法，字符串补齐 ES7使用padStart(字符串最大的长度,补位的字符串)
调用时需要先隐式转换成字符串,为了调用padStart 
3. 我在本题中关于将传入的：格式的字符串时间转换到秒的过程中，想到了可以使用new date来获取，通过补齐字符串
前面的年月日天 再调用 getmin getsec即可获取分和秒。编程不应该只有固定的模式和思维，那样也太无趣了
就像生活一样，不要入众，要与众不同。
-->

